<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-01 20:36:32
 * @FilePath: /src/views/service/billboard/components/billboardDashboard.vue
 * @LastEditTime: 2021-07-20 15:21:46
 * @LastEditors: luojiajun
-->
<template>
    <div class="billboard-dashboard">
        <sh-card v-model="cardList"></sh-card>
        <el-row>
            <el-col :span="24">
                <div class="billboard-dashboard-chart">
                    <line-bar-chart
                        :chart-setting="chartSetting"
                        :chart-data="chartData"
                        ref="chart"
                    ></line-bar-chart>
                </div>
            </el-col>
        </el-row>

        <div class="mb10">
            <el-row :gutter="10">
                <el-col :span="12" :lg="12">
                    <div class="my-view-table">
                        <base-table :table-data="subscribeData" :max-table-height="maxHeight"></base-table>
                    </div>
                </el-col>
                <el-col :span="12" :lg="12">
                    <div class="my-view-table">
                        <base-table :table-data="invokeData" :max-table-height="maxHeight"></base-table>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import shCard from "@/components/Card";
import lineBarChart from "@/components/Chart/LineBarChart";
import BaseTable from "@/components/Table";
import { getBillboardStatistics, getBillboardToadyStatistics, getBillboardRanking } from "@/api/dataService/billboard.js";
import { getHeight } from "@/utils/zkComm";

export default {
    name: "billboardDashboard",
    components: {
        shCard,
        lineBarChart,
        BaseTable
    },
    data() {
        return {
            loading: false,
            cardList: [],
            chartSetting: {
                legend: {
                    data: []
                },
                xAxis: {
                    data: []
                }
            },
            chartData: {
                line: []
            },
            subscribeData: {
                title: "API订阅排行榜",
                coloums: [
                    { label: "", props: "name" },
                    { label: "总订阅数", props: "number", align: 'center' }
                ],
                records: []
            },
            invokeData: {
                title: "API服务调用次数排行榜",
                coloums: [
                    { label: "", props: "name" },
                    { label: "总调用数", props: "number", align: 'center' }
                ],
                records: []
            },
            maxHeight: undefined
        };
    },
    created() {
        this.fetchData()
    },
    mounted() {
        this.maxHeight = getHeight(true) - 500;
    },
    methods: {
        async fetchData() {
            if (this.loading) return
            this.loading = true
            
            let result = await Promise.all([this.getBillboardStatistics(), this.getBillboardToadyStatistics(), this.getBillboardRanking()])
            
            // 卡片统计数据
            let cardList = []
            for (let i = 0; i < result[0].length; i++) {
                const item = result[0][i];
                cardList.push({
                    label: item.name,
                    value: item.todayNum,
                    total: item.totalNum,
                })
            }
            this.cardList = cardList

            // 图表
            let xAxis = []
            let lineData = []
            let legend = []
            for (let i = 0; i < result[1].length; i++) {
                const item = result[1][i];
                let tmpData = []
                for (let j = 0; j < item.data.length; j++) {
                    const child = item.data[j];
                    tmpData.push(child.totalNum)
                    if (i == 0) {
                        xAxis.push(child.date)
                    }
                }

                lineData.push({
                    name: item.name,
                    data: tmpData
                })
                legend.push(item.name)
            }
            
            let chartSetting = {
                legend: {
                    data : legend
                },
                xAxis: {
                    data : xAxis
                }
            }
            this.chartSetting = Object.assign({}, this.chartSetting, chartSetting)
            this.chartData.line = lineData
            this.resize()

            // 排行榜
            let ranking = result[2]
            if (ranking) {
                let subscribeRecords = []
                for (let i = 0; i < ranking.apiSubscribeRankingDtoList.length; i++) {
                    const item = ranking.apiSubscribeRankingDtoList[i];
                    subscribeRecords.push({
                        name: item.apiName,
                        number: item.totalNum,
                    })
                }
                this.subscribeData.records = subscribeRecords

                let invokeRecords = []
                for (let i = 0; i < ranking.apiInvokeRankingDtoList.length; i++) {
                    const item = ranking.apiInvokeRankingDtoList[i];
                    invokeRecords.push({
                        name: item.apiName,
                        number: item.totalNum,
                    })
                }
                this.invokeData.records = invokeRecords
            }
            
            setTimeout(() => {
                this.loading = false
            }, 350);
        },
        resize() {
            if (this.$refs.chart) this.$refs.chart.resize()
        },
        // 卡片统计
        async getBillboardStatistics() {
            return new Promise((resolve, reject) => {
                getBillboardStatistics().then(res => {
                    resolve(res.data)
                }).catch(() => {
                    reject()
                })
            })
        },
        // 图表
        async getBillboardToadyStatistics() {
            return new Promise((resolve, reject) => {
                getBillboardToadyStatistics().then(res => {
                    resolve(res.data)
                }).catch(() => {
                    reject()
                })
            })
        },
        // 排行榜
        async getBillboardRanking() {
            return new Promise((resolve, reject) => {
                getBillboardRanking().then(res => {
                    resolve(res.data)
                }).catch(() => {
                    reject()
                })
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.billboard-dashboard {
    &-chart {
        width: 100%;
        height: 300px;
        margin: 24px 0 0;
    }
}
</style>
